<script setup lang="ts">
import { ref,reactive,onMounted } from 'vue'
//import axios from 'axios';
import request  from '@/utils/request.js'
import type { TableColumnCtx, TableInstance } from 'element-plus'

//导入消息框
import { ElMessage,ElMessageBox  } from 'element-plus'
import type { Action } from 'element-plus'

interface User {
  id: number
  member: string
  email: string
  gender: string
  phone:string
}

const tableRef = ref<TableInstance>()

const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.phone
}
const filterTag = (value: string, row: User) => {
  return row.gender === value
}
const filterHandler = (
  value: string,
  row: User,
  column: TableColumnCtx<User>
) => {
  const property = column['property']
  return row[property] === value
}

let tableData: User[] = reactive([])

//用axios去读取 userlist.json文件中的数据

const initUserList = async ()=>{

    //const {data}=await axios.post('/userlist.json') //http://localhost:8080/memberSystem/MemberJsonServlet
    //const {data}=await axios.post('http://localhost:8080/memberSystem/MemberJsonServlet')

    const data =await request.post('/MemberJsonServlet')
    tableData.push(...data)
    //console.log('tableData:',tableData)
    //console.log(data)

    ElMessage({
      showClose: true,
      message: '数据加载成功.',
      type: 'warning',
      duration:3000,
      onClose:show,
      offset:462
    })
}

onMounted(()=>{ 
    initUserList()//加载数据
})
 
 const show=()=>{
    //alert('ddd')
  // ElMessageBox.alert('操作成功', '温馨提示', {
  //   // if you want to disable its autofocus
  //   // autofocus: false,
  //   confirmButtonText: '确定',
  //   //cancelButtonText: '取消',
  //   callback: (action: Action) => {
  //     ElMessage({
  //       type: 'info',
  //       message: `action: ${action}`,
  //     })
  //   },
  // })

  ElMessageBox.confirm(
    '操作成功',
    '温馨提示',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    }
  )
    .then(() => {
      ElMessage({
        type: 'success',
        message: '你点了确定',
      })
    })
    .catch(() => {
      ElMessage({
        type: 'info',
        message: '你点了取消',
      })
    })
 }
</script>

<template>
    <h1>李都名下的会员:</h1>
    <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
    <el-table-column
      prop="id"
      label="id"
      sortable
      width="80"
      column-key="id"
    />
    <el-table-column prop="memberName" label="用户名" width="120" />
    <el-table-column prop="phone" label="手机号码" :formatter="formatter"  width="120" />
    <el-table-column prop="gender" label="性别"  width="100"
     :filters="[
        { text: '男', value: '男' },
        { text: '女', value: '女' },
      ]"
      :filter-method="filterTag"
     filter-placement="bottom-end"/>
    <el-table-column
      prop="email"
      label="邮箱"
      width="180"
    />
    <el-table-column label="操作"  width="180">
        <el-button type="primary" size="small">修改</el-button>
        <el-button type="danger" size="small">修改</el-button>
    </el-table-column>
  </el-table>
</template>